<template>
	<section class="page">
		<div class="head-wrap">
			<user-info></user-info>
			<div class="work-num">
				<ul>
					<li>
						<p class="keynote">{{workInfo?.zan_num || 0}}</p>
						<span>点赞数</span>
					</li>
					
					<li>
						<p class="keynote">{{workInfo?.collect_num || 0}}</p>
						<span>收藏数</span>
					</li>
			
					<li>
						<p class="keynote">{{workInfo?.download_num || 0}}</p>
						<span>下载数</span>
					</li>
					
					<li>
						<p class="keynote">{{workInfo?.score || 0}}</p>
						<span>云算力</span>
					</li>
				</ul>
				
				<div class="btn-wraps">
					<div @click="toDetail">明细</div>
					<div @click="recharge" class="charge">充值</div>
				</div>
			</div>
		</div>
		
		<div class="rights-wrap">
			<div class="title">
				<img src="@/assets/img/decoration.svg"/>
				<p>云算力权益</p>
				<img src="@/assets/img/decoration.svg" class="rotate"/>
			</div>
			<el-table :data="tableData" border size='medium' style="width: 60%;" :height="500" :row-class-name="tableRowClassName">
			    <el-table-column  prop="rights"  label="云算力权益"></el-table-column>
				<el-table-column  prop="type"  label="模型类型"></el-table-column>
				<el-table-column  prop="accuracy"  label="模型精度"></el-table-column>
				<el-table-column  prop="score"  label="云算力点数"></el-table-column> 
			</el-table>
		</div>
		
		<recharge-dialog v-if="isRecharge"  @close="close"></recharge-dialog>
	</section>
</template>

<script>
	import utils from '@/assets/js/utils';
	import RechargeDialog from '@/components/RechargeDialog';
	import UserInfo from '../personal-center/components/userInfo';
	import {workList} from '@/api/personal.js';
	export default {
		data() {
			return {
				isRecharge: false,
				workInfo:{},
				searchData: {
					page: 1,
					size: 10
				},
				tableData:[
					{rights:"生成模型",type:"文本模型",accuracy:"常规模型",score:"5"},
					{rights:"生成模型",type:"文本模型",accuracy:"高清模型",score:"20"},
					{rights:"生成模型",type:"图片模型",accuracy:"高清模型",score:"20"},
					{rights:"下载模型",type:"图片模型/文本模型",accuracy:"常规模型/高清模型",score:"5"},
				]
			}
		},

		created() {
			this.getWorkList();
		},

		methods: {
			toDetail(){
				this.$router.push({
					path:"./computing-detail"
				})
			},
			
			recharge(){
				this.isRecharge = true;
			},
			
			async getWorkList() {
				const {
					data,
					status
				} = await workList(this.searchData);
				if (status !== 200) return;
				if(data.code == 200){
					this.workInfo = data?.data || {};
				}
				else{
					this.workInfo = {}
					this.$message.warning(data && data.message || '获取失败');
				}
			},
			
			close() {
				this.isRecharge = false;
			},
			
			tableRowClassName({row, rowIndex}) {
			     return 'style-row';
			}
		},
		
		components: {
			RechargeDialog,
			UserInfo
		}
	};
</script>

<style lang="scss" scoped>
	.page{
		height: 100%
	}
	.head-wrap{
		@include flex-row;
		margin-bottom: 20px;
		.work-num{
			@include flex-row;
			ul{
				margin-left: 20px;
				border-left: 1px solid  #CFDDE1;
				@include flex-row;
				li{
					margin-left: 26px;
					text-align: center;
					p{
						margin-bottom: 10px;
						font-size: 18px;
						color: #333333;
						font-weight: bold;
					}
					span{
						font-size: 14px;
						color: #999999;
					}
				}
			}
			.btn-wraps{
				@include flex-row;
				margin-left: 100px;
				div{
					@include cursor-style;
					margin-right: 20px;
					padding: 10px 30px;
					background: #FFC267;
					border-radius: 5px 5px 5px 5px;
				}
				.charge{
					background: #FF8A00;
				}
			}
		}
	}
	
	.rights-wrap{
		@include flex-row;
		flex-direction: column;
		justify-content: center;
		margin-top: 60px;
		// height: calc(100% - 120px);
		.title{
			@include flex-row;
			margin-bottom: 60px;
			p{
				color: #463934;
				font-size: 24px;
				font-style: normal;
				font-weight: 500;
				margin: 0 16px;
			}
			.rotate{
				transform: rotate(180deg);
			}
		}
	}
	:deep(.style-row){
		height: 60px;
	}
</style>
